<template>
    <div class="upload-image-container">
        <div class="row no-gutters upload-item-container">
            <div class="col">
                <el-progress v-if="percent >0 " :percentage="percent" status="success"></el-progress>
                <!-- quill-editor -->
                <tiny-mce ref="editor"
                          :id="editorID"
                          v-model="content"
                          :toolbar1="toolbar"
                          :other_options="options"
                          @editorChange="onChange"
                >
                    <!--@blur="onEditorBlur($event)"-->
                    <!--@focus="onEditorFocus($event)"-->
                    <!--@ready="onEditorReady($event)">-->
                </tiny-mce>
                <el-upload
                        v-show="false"
                        :on-progress="handleProgress"
                        action="/api/file/upload"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="onImgSuccess"
                        :before-upload="beforeImgUpload">
                    <el-button ref="uploadButton" size="small" type="primary">点击上传</el-button>
                </el-upload>
            </div>
        </div>
    </div>

</template>
<script>
  import tinymce from 'vue-tinymce-editor'
  import { getToken } from '@/utils/auth'
  export default {
    props: {
      value: {
        type: [String, Array],
        default: '',
      },
      editorID: {
        type: String,
        default: 'editor',
      }
    },
    components: {
      'tiny-mce':tinymce
    },
    data () {
      let self = this
      return {
        percent: 0,
        content: this.value,
        loading: false,
        headers:{'Authorization':'Bearer '+ getToken()},
        toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | ' +
          'alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | imgUpload ',
        options: {
          height: 370,
          valid_elements: '*[*]',
          language_url: '/js/zh_CN.js',
          setup: function (editor) {
            editor.addButton('imgUpload', {
              text: false,
              icon: 'image',
              onclick: function () {
                self.$refs.uploadButton.$el.click()
              },
            })
          },
        },
        // innerContent: '<h2 class="ql-align-center"><span class="ql-font-serif">Text content loading..</span></h2>',
      }
    },
    computed: {},
    methods: {
      onChange: function (event) {
        this.updateValue(this.content)
      },
      updateValue (value) {
        this.$emit('input', value)
        // console.log(value);
      },
      handleProgress (event) {
        this.percent = parseInt(event.percent)
      },
      beforeImgUpload (file) {
        let isJPG
        switch (file.type) {
          case  'image/jpeg':
          case  'image/jpg':
          case  'image/png':
            isJPG = true
            break
          default:
            isJPG = false
        }
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      beforeMediaUpload (file) {

        let isMP4
        switch (file.type) {
          case  'video/mp4':
            isMP4 = true
            break
          default:
            isMP4 = false
        }
        const isLt2M = file.size / 1024 / 1024 < 10

        if (!isMP4) {
          this.$message.error('上传文件只能是 MP4 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 10MB!')
        }
        return isMP4 && isLt2M
      },
      onMediaSuccess (response,file) {
        let self = this
        self.percentShow = false
        self.percent = 0
        self.loading = false
        let value = response.path
        self.$refs.editor.editor.insertContent('&nbsp;&nbsp;<p  data-ephox-embed-iri="' + value + '">' +
          '<video width="640"controls="controls">' +
          '<source src="' + value + '" >' +
          '</video></p>&nbsp;&nbsp;')
        this.$emit('uploaded', file)
      },
      onImgSuccess (response, file, fileList) {
        console.log('success=>', response)
        let self = this
        self.loading = false
        self.percentShow = false
        self.percent = 0
        let value =  response.path
        // let addRange = self.$refs.editor.getSelection()
        self.$refs.editor.editor.insertContent('&nbsp;<img src="' + value + '"/>&nbsp;')
        this.$emit('uploaded', file)
      },
    },
    watch: {
      'value': function (newValue) {
        this.content = newValue
      },
    },
  }
</script>
<style>

</style>
